<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PLS</title>
    <link rel="icon" type="image/x-icon" href="/assets/bitbug_favicon-7.ico"/>
    <asset:stylesheet src="homer/vendor/fontawesome/css/font-awesome.css"/>
    <asset:stylesheet src="homer/vendor/bootstrap/dist/css/bootstrap.css"/>
    <asset:stylesheet src="homer/style.css"/>
    <asset:stylesheet src="homer/vendor/slideUnlock/drag.css"/>
    <asset:stylesheet src="video/jquery.vidbacking.css"/>
    %{--<asset:stylesheet src="video/style2.css"/>--}%

    <style type="text/css">
    body {
        font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", sans-serif;
    }

    .help-block {
        font-size: 14px;
        margin: 14px 0px;
    }

    .color-opacity {
        color: #fff;
    }

    .userpsdfont {
        font-size: 20px;
        color: #666;
        font-weight: normal;
    }

    .login-container {
        max-width: 480px;
        padding-top: 8%;
    }

    .btn-success {
        background: #e8e8e8;
        border-color: #e8e8e8;
        color: #6a6c6f;
    }

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
        background: #62cb31;
    }

    .paddingBody {
        padding: 40px !important;
    }

    @media screen and (max-width: 1380px) {
        .login-container {
            max-width: 420px;
            padding-top: 3.5%;
        }

        .paddingBody {
            padding: 20px !important;
        }
    }
    </style>

</head>

<body class="blank">

<video poster autoplay muted loop class="vidbacking-active-body-back">
    <source src="../assets/video/home.mp4" type="video/mp4">
</video>

%{--<div class="splash">--}%
    %{--<div class="color-line"></div>--}%

    %{--<div class="splash-title"><h1>PLS</h1>--}%

        %{--<p></p>--}%

        %{--<div class="spinner"><div class="rect1"></div>--}%

            %{--<div class="rect2"></div>--}%

            %{--<div class="rect3"></div>--}%

            %{--<div class="rect4"></div>--}%

            %{--<div class="rect5"></div>--}%
        %{--</div>--}%
    %{--</div>--}%
%{--</div>--}%

<div class="login-container">
    <div class="row">
        <div class="col-md-12">
            <div class="text-center m-b-md">
                <span class="color-opacity" style="font-size: 15px;"><b>Please login</b></span>

                <h2 class="color-opacity" style="font-size: 36px;">CINDATA PLS</h2>
            </div>

            <div class="hpanel">
                <div class="panel-body border-radius paddingBody">
                    <g:if test='${flash.message}'>
                        <div class='alert alert-dismissable alert-warning'>
                            <p>${flash.message}</p>
                        </div>
                    </g:if>

                    <form action="/login/authenticate" method='POST' id='loginForm'>
                        <div class="form-group">
                            <h3 class="control-label userpsdfont" for="username">用户名</h3>
                            <input type="text" title="Please enter you username" required="" value="" name="username"
                                   id="username" class="form-control" autofocus="autofocus">
                            <span class="help-block small" id="nameHelp">请输入用户名</span>
                        </div>

                        <div class="form-group">
                            <h3 class="control-label userpsdfont" for="password">密码</h3>
                            <input type="password" title="Please enter your password" placeholder="************"
                                   required="" value="" name="password" id="password" class="form-control">
                            <span class="help-block small" id="pwdHelp">请输入密码</span>
                        </div>

                        <div class="form-group" id="code-group">
                            <div id="drag"></div>
                            <span class="help-block small" id="codeHelp">请滑动解锁</span>
                        </div>

                        <button type="button" id="submitBtn" class="btn btn-success btn-block">登录</button>
                    </form>
                    <div class="text-center">Power by Intelligent Data Services</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center color-opacity" style="color: #fff;">
                2017${com.cindata.DateUtilService.showCurrentYear()} © 北京国信达数据技术有限公司
            </div>
        </div>
    </div>
</div>

<asset:javascript src="homer/vendor/jquery/dist/jquery.min.js"/>
<asset:javascript src="homer/vendor/bootstrap/dist/js/bootstrap.min.js"/>
<asset:javascript src="homer/vendor/slideUnlock/drag.js"/>
<asset:javascript src="video/jquery.vidbacking.js"/>
<script>
    $(function () {
        // 初始化vidbacking
        $('body').vidbacking();
        $('#drag').drag();
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (isMobile) {
            $("#code-group").remove();
        }
        $("#submitBtn").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            var drag_text = $(".drag_text").text();
            if (!username) {
                $("#nameHelp").addClass("text-danger");
                setTimeout(function () {
                    $("#nameHelp").removeClass("text-danger");
                }, 3000);
                return;
            }
            if (!password) {
                $("#pwdHelp").addClass("text-danger");
                setTimeout(function () {
                    $("#pwdHelp").removeClass("text-danger");
                }, 3000);
                return;
            }
            if (!isMobile) {
                if (drag_text != "验证通过") {
                    $("#codeHelp").addClass("text-danger");
                    setTimeout(function () {
                        $("#codeHelp").removeClass("text-danger");
                    }, 3000);
                    return;
                }
            }
            $("#loginForm").submit();
        });
    })
</script>
</body>
</html>
